<template>
	<view class="main" v-for="orderitem in order">
		<p class="orderstatus">订单{{orderitem.status}}</p>
		<view class="main-order">
			<view class="main-order-text">
				<p style="font-size: 14px;font-weight: 500;">感谢您对小象外卖的信任，期待再次光临。</p>
				<p style="font-size: 12px;font-weight: 400;">温馨提示：请厉行节约，拒绝浪费。</p>
				<p style="font-size: 12px;font-weight: 300;margin-top: 5px;">保障已结束 ></p>
				<u-divider></u-divider>
			</view>
			<view class="order-after">
				<view v-for="orderitems in orderafter" class="order-after-item" color="#585A59">
					<u-icon v-bind:name="orderitems.path" size="20"></u-icon>
					<p style="padding-top: 8px;">{{orderitems.name}}</p>
				</view>
			</view>
		</view>
		<view class="main-order-shop">
			<shopOrder :order="order"></shopOrder>
		</view>
		<view class="main-order-shop">
			<shopAdr :order="order"></shopAdr>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import shopOrder from "./shopOrder.vue"
	import shopAdr from "./shopAdr.vue"

	const orderafter = [{
		path: 'red-packet-fill',
		name: '打赏骑手'
	}, {
		path: 'plus-square-fill',
		name: '再来一单'
	}, {
		path: 'chat-fill',
		name: '评价'
	}, {
		path: 'more-circle-fill',
		name: '联系商家'
	}, {
		path: 'server-fill',
		name: '联系骑手'
	}]

	const order = [{
		id: '1',
		name: '孙氏烤鸭',
		content: [{
			name: '手撕烤鸭整只（下单送优酸乳）',
			img:"../../static/index/food.png",
			description:"1人份，整只",
			num: '1',
			price: '29.9',
		}, {
			name: '米饭',
			img:"../../static/index/food.png",
			description:"1人份",
			num: '1',
			price: '2',
		}],
		address:"四川交通职业技术学院 211",
		user:"安赢 15586664545",
		ordernum:"1100 6158 2090 4324 599",
		time:"2023-07-01  15:45:12",
		paymethod:"微信支付",
		status: '已完成',
		pay: '31.9',
		num: '2'
	}]


	onLoad((options) => {
		console.log(options)
	})
</script>

<style>
	.main {
		background-color: #F4F4F4;
		width: 100%;
		height: 100vh;
		padding-bottom: 10px;
	}

	.orderstatus {
		padding: 10px 15px;
		font-size: 22px;
		font-weight: 700;
	}

	.main-order {
		margin-top: 10px;
		width: 90%;
		background-color: #FFFFFF;
		padding: 10px;
		border-radius: 10px;
		margin: 0 auto;
	}
	.main-order-text{
		color: #575859;
	}

	.order-after {
		width: 100%;
		font-size: 12px;
		font-weight: 700;
		color: #575859;
		display: flex;
		justify-content: space-between;
	}
	.order-after-item{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.main-order-shop{
		width: 100%;
		margin-top: 10px;
	}
</style>